<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" >
  <title>学生信息管理系统</title>
  <script>

    function add(){
      const iptName = document.getElementById('iptName');
      const iptPassword = document.getElementById('iptPassword');
      const iptSex = document.getElementById('iptSex');
      const iptClassn = document.getElementById('iptClassn');
      xhttp.onreadystatechange = function (){
        if(this.readyState == 4 && this.status == 200){
          const obj = JSON.parse(this.responseText);
          console.log(obj)
          if(obj.success){
            alert('添加成功!');
            refresh();
          }else {
            alert('添加失败!');
          }
        }
      }
      xhttp.open("POST","/student/add?name=" + iptName.value + '&password=' + iptPassword.value +'&sex=' + iptSex.value +'&classn=' + iptClassn.value,true);
      xhttp.setRequestHeader('Accept','application/json');
      xhttp.send();
    }
    function onDelete(student){
      xhttp.onreadystatechange = function (){
        if(this.readyState == 4 && this.status == 200){
          const obj = JSON.parse(this.responseText);
          console.log(obj);
          if(obj.success){
            alert('删除成功!');
            refresh();
          }else {
            alert('删除失败!');
          }
        }
      }
      xhttp.open("POST","/student/delete?id=" + student.id,true);
      xhttp.setRequestHeader('Accept','application/json');
      xhttp.send();
    }
    function update(student){
      const  iptId = document.getElementById('iptId');
      const iptName = document.getElementById('iptName');
      const iptPassword = document.getElementById('iptPassword');
      const iptSex = document.getElementById('iptSex');
      const iptClassn = document.getElementById('iptClassn');
      iptId.value = student.id;
      iptName.value = student.name;
      iptPassword.value = student.password;
      iptSex.value = student.sex;
      iptClassn.value = student.classn;
    }
    function onUpdate(){
      const  iptId = document.getElementById('iptId');
      const iptName = document.getElementById('iptName');
      const iptPassword = document.getElementById('iptPassword');
      const iptSex = document.getElementById('iptSex');
      const iptClassn = document.getElementById('iptClassn');
      xhttp.onreadystatechange = function (){
        if(this.readyState == 4 && this.status == 200){
          const obj = JSON.parse(this.responseText);
          console.log(obj)
          if(obj.success){
            alert('修改成功!');
            refresh();
          }else {
            alert('修改失败!');
          }
        }
      }
      xhttp.open("PUT","/student/update?id="+iptId.value + '&name=' + iptName.value + '&password=' + iptPassword.value +'&sex=' + iptSex.value +'&classn=' + iptClassn.value,true);
      xhttp.setRequestHeader('Accept','application/json');
      xhttp.send();
    }
    function getById(){
      const iptId = document.getElementById('iptId');
      xhttp.onreadystatechange = function (){
        if(this.readyState == 4 && this.status == 200) {
          proQueryResponse(this.responseText);
        }
      };
      xhttp.open("GET","/student/query?id="+iptId.value,true);
      xhttp.setRequestHeader('Accept','application/json');
      xhttp.send();
    }

    function proQueryResponse(responseText) {
      const obj = JSON.parse(responseText);
      if (obj.success) {
        const tblBody = document.getElementById('students');
        tblBody.innerHTML = '';
        for (let student of obj.data) {
          const tr = document.createElement('tr');
          const td = document.createElement('td');
          td.innerText = student.id;
          const td2 = document.createElement('td');
          td2.innerText = student.name;
          const td3 = document.createElement('td');
          td3.innerText = student.password;
          const td4 = document.createElement('td');
          td4.innerText = student.sex;
          const td5 = document.createElement('td');
          td5.innerText = student.classn;
          const td6 = document.createElement('td');
          const iptDel = document.createElement('input');
          iptDel.type = 'button';
          iptDel.value = '删除';
          iptDel.addEventListener('click', function () {
            onDelete(student);
            return false;
          });
          const iptUpdate = document.createElement('input');
          iptUpdate.type = 'button';
          iptUpdate.value = '修改';
          iptUpdate.addEventListener('click', function () {
            update(student);
          });
          td6.appendChild(iptDel);
          td6.appendChild(iptUpdate);
          tr.appendChild(td);
          tr.appendChild(td2);
          tr.appendChild(td3);
          tr.appendChild(td4);
          tr.appendChild(td5);
          tr.appendChild(td6);
          tblBody.appendChild(tr);
        }
      }
    }
    function refresh(){
      xhttp.onreadystatechange = function (){
        if(this.readyState == 4 && this.status==200) {
          proQueryResponse(this.responseText);
        }
      };
      xhttp.open("GET","/students",true);
      xhttp.setRequestHeader('Accept','application/json');
      xhttp.send();
    }
    var xhttp = new XMLHttpRequest();

    window.onload = function (){
      refresh();
    }
  </script>
</head>
<body>
<div>
  <form>
    <div>
      <label for="iptId">Id</label>
      <input id= "iptId" type="text" placeholder="输入id号" name="id">
    </div>
    <div>
      <label for="iptName">姓名</label>
      <input id= "iptName" type="text" placeholder="输入姓名" name="name">
    </div>
    <div>
      <label for="iptPassword">学号</label>
      <input id= "iptPassword" type="text" placeholder="输入学号" name="password">
    </div>
    <div>
      <label for="iptSex">性别</label>
      <input id= "iptSex" type="text" placeholder="输入性别" name="sex">
    </div>
    <div>
      <label for="iptClassn">班级</label>
      <input id= "iptClassn" type="text" placeholder="输入班级" name="classn">
    </div>
  </form>
  <input type="button" value="添加" onclick="add()">
  <input type="button" value="删除" onclick="onDelete()">
  <input type="button" value="修改" onclick="onUpdate()">
  <input type="button" value="查询" onclick="getById()">
  <input type="button" value="刷新" onclick="refresh()">
  <table>
    <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>学号</th>
      <th>性别</th>
      <th>班级</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="students">

    </tbody>
  </table>
</div>
</body>
</html>